<template>
  <div>
    <div class="dashboard-container">
      <div class="big-back-box">
        <div class="top">优质机构列表</div>
        <div style="height: 20px"></div>

        <el-card class="box-card" style="margin: 0 auto">
          <!-- 条件搜索 -->
          <div style="height: 20px; color: #409eff; line-height: 20px">
            分类查询
          </div>
          <br />
          <el-form :inline="true" class="demo-form-inline">
            <el-select v-model="searchCity" placeholder="请选择城市">
              <el-option
                v-for="item in chooseList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-form-item style="margin-left: 10px">
              <el-button type="primary" @click="searchByCity">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 列表 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="企业名称" align="center" width="200">
              <template slot-scope="{ row }">
                <span>{{ row.enterpriseName }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="办公地点" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.officeLocation }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="分支机构" align="center" width="200">
              <template slot-scope="{ row }">
                <span>{{ row.branchOffice }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="法律求助资质" align="center" width="110">
              <template slot-scope="{ row }">
                <span>{{ row.legalAid }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="公司服务资质" align="center" width="110">
              <template slot-scope="{ row }">
                <span>{{ row.companyService }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="资质证照资质" align="center" width="110">
              <template slot-scope="{ row }">
                <span>{{ row.qualificationCertificate }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="优质机构" align="center" width="110">
              <template slot-scope="{ row }">
                <span>{{ row.qualityOrganization }}</span>          
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="{ row }">
                <router-link :to="{ path: '/lawOffice/readMore', query: row }">
                  <el-button type="text">详情</el-button>
                </router-link>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <pagination
            :total="total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pageSize"
            page-sizes="[5,10]"
            @pagination="getList"
          />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// 分页功能
import Pagination from "@/components/Pagination";

// 查看优质服务商
import { getQualityServiceProvider } from "@/api/lawOffice.js";
// 通过地点查看优质服务商
import { getQualityServiceProviderByLocation } from "@/api/lawOffice.js";

export default {
  components: { Pagination }, // 分页
  data() {
    return {
      // 分页
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 5,
      },
      // 机构列表
      tableData: [],
      // 模糊查询
      searchCity: "",
      // 选项列表
      chooseList: [
        {
          value: "北京",
          label: "北京",
        },
        {
          value: "上海",
          label: "上海",
        },
        {
          value: "广州",
          label: "广州",
        },
        {
          value: "深圳",
          label: "深圳",
        },
        {
          value: "东莞",
          label: "东莞",
        },
      ],
    };
  },
  // 调用初始化，一进页面就执行。
  mounted() {
    console.log("mounted()");
    this.init();
  },
  methods: {
    // 初始化
    init() {
      console.log("init()");
      // 查看优质服务商
      getQualityServiceProvider(this.listQuery.pageNum, this.listQuery.pageSize).then(
        (resp) => {
          this.tableData = resp.data.qualityServiceProvider.content;
          this.total = resp.data.qualityServiceProvider.totalSize;
        }
      );
    },
    // 分页
    getList(pageObj) {
      console.log(pageObj);
      // 获取数据
      this.listQuery.pageNum = pageObj.page;
      this.listQuery.pageSize = pageObj.limit;
      this.init();
    },
    // 模糊查询
    searchByCity() {
      getQualityServiceProviderByLocation(this.searchCity, this.listQuery.pageNum,this.listQuery.pageSize).then((resp) => {
        this.tableData = resp.data.qualityServiceProvider.content;
        this.total = resp.data.qualityServiceProvider.totalSize;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 页头LOGO
.top {
  height: 50px;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
}

// 大盒子
.big-back-box {
  width: 1100px;
  margin: 0 auto;
}

// 原框架自带
.dashboard {
  &-container {
    margin-top: 30px;
    // margin-left: 30px;
    // margin-right: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>